<template>
	<view class="container">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">加入联盟</block>
		</cu-custom>
		<!-- 显示联盟列表 -->
		<view class="alliance-list">
			<view v-for="(alliance, index) in alliances" :key="index" class="alliance-item"
				@click="selectAlliance(alliance)">
				<text>{{ alliance.alliance_name }}</text>
			</view>
		</view>

		<view class="list">
			<my-shops @upate="update" :shops="item" v-for="item in shops" :key="item.id"></my-shops>
		</view>

		<!-- 自定义背景遮罩 -->
		<view v-if="showPopup" class="popup-overlay" @click="closePopup">
			<view class="popup-container" @click.stop>
				<text v-if="selectedAlliance">加入联盟</text>
				<custom-dropdown :options="alliances" placeholder="请选择联盟"
					@update:selectedAlliance="handleAllianceSelection" />
				<!-- 电话号码输入框 -->
				<view>
					<input v-model="phoneNumber" class="phone-input" type="tel" placeholder="请输入电话号码" maxlength="11" />
				</view>
				<view class="button-group">
					<button @click="joinAlliance">加入</button>
					<button @click="closePopup">取消</button>
				</view>
			</view>
		</view>
		<!-- 其他内容 -->
		<button class="join-button" @click="popAlliance">+</button>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import user from '@/api/user';
	import api from "@/api/";
	import MyShops from "@/components/MyAlliance";
	import CustomDropdown from '@/components/CustomDropdown.vue';

	export default {
		data() {
			return {
				shops: [],
				alliances: [], // 模拟的联盟列表
				showPopup: false, // 控制弹窗显示
				selectedAlliance: null, // 当前选中的联盟
				phoneNumber: '', // 存储电话号码
			};
		},
		components: {
			MyShops,
			CustomDropdown
		},
		computed: {
			// 检查电话号码是否有效
			isValidPhoneNumber() {
				const phoneRegex = /^[0-9]{11}$/; // 简单的电话号码验证规则
				return phoneRegex.test(this.phoneNumber);
			},
		},
		onLoad() {
			this.getCateory()
			this.search(13)
		},
		methods: {
			popAlliance() {

				this.showPopup = true; // 显示弹窗
			},
			handleAllianceSelection(alliance) {
				console.log('选中的联盟：', alliance.alliance_name);
				// 执行其他操作
				this.selectedAlliance = alliance;
			},
			update(id) {
				this.search(id)
			},
			async search(alliance_id) {
				this.bool = false
				this.shops = []
				let res = await api.shopList({
					alliance_id: alliance_id
				})
				if (res.code == 1) {
					if (!res.data.list.length) return this.bool = true
					this.shops = res.data.list
				}
			},
			async getCateory() {
				let res = await api.allianceList()
				if (res.code == 1) {
					this.alliances = res.data.list

				}
			},
			// 用户点击某个联盟时
			selectAlliance(alliance) {
				this.selectedAlliance = alliance; // 设置选中的联盟
				this.phoneNumber = ''; // 清空电话号码
				this.search(alliance.id)
			},
			// 加入联盟的操作
			joinAlliance() {
				if (this.selectedAlliance && this.isValidPhoneNumber) {
					// 在这里可以执行加入联盟的逻辑（例如，调用API）

					user.joinalliance({
						...this.selectedAlliance,
						phoneNumber: this.phoneNumber,
					}).then(res => {
						uni.hideLoading();
						// if (res.code === 1) {
						// this.user_level = res.data.user.user_level
						return this.toast(res.msg)
						// }
					})

					uni.showToast({
						title: `已加入 ${this.selectedAlliance.alliance_name} 联盟`,
						icon: 'success',
					});
					this.closePopup(); // 关闭弹窗

				} else {
					uni.showToast({
						title: '请输入有效的电话号码',
						icon: 'none',
					});
				}
			},
			// 关闭弹窗
			closePopup() {
				this.selectedAlliance = null; // 关闭时重置选中的联盟
				this.showPopup = false;
			},
		},
	};
</script>

<style scoped>
	.container {
		position: relative;
		/* 其他样式 */
	}

	.alliance-list {
		display: flex;
		flex-wrap: wrap;
		/* 允许换行 */
		padding: 10px;
		gap: 15px;
		/* 设置每个联盟项之间的间距 */
	}

	.alliance-item {
		width: 30%;
		/* 每个联盟项宽度设置为48%，以便每行显示两个 */
		padding: 15px;
		background-color: #f5f5f5;
		border-radius: 5px;
		text-align: center;
		box-sizing: border-box;
		/* 防止宽度超过父容器 */
	}

	.alliance-item:hover {
		background-color: #e0e0e0;
	}

	/* 自定义背景遮罩 */
	.popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		/* 半透明背景 */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 弹窗容器 */
	.popup-container {
		background-color: white;
		padding: 20px;
		width: 80%;
		text-align: center;
		border-radius: 10px;
		font-size: 20px;
	}

	.phone-input {
		height: 45px;
		font-size: 20px;
		border: 1px solid #ddd;
		margin-top: 5px;
		text-align: left;
		padding-left:5px;
	}

	.button-group {
		display: flex;
		justify-content: space-around;
		margin-top: 20px;


	}

	button {
		/* padding: 5px; */
		background-color: #ff6600;
		color: white;
		border: none;
		border-radius: 5px;
	}

	button:disabled {
		background-color: #ccc;
	}

	.join-button {
	  position: fixed;
	  left: 80%;
	  bottom: 20px;
	  transform: translateX(-50%);
	  background-color: #ff6600;
	  color: white;
	  border: none;
	  border-radius: 50%;
	  width: 40px;
	  height: 40px;
	  font-size: 18px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
</style>
